<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <p>aaa</p>
    <hr>

    <div id="app">
        <h1 style="color: red;">{{ name }}</h1>
        <p>{{ age }}</p>
    </div>

    <hr>
    <p>bbb</p>

    <!-- 使用<template>标签定义模板内容 -->
    <template id="hello">
        <div>
            <h2 style="color: green;">{{ name }}</h2>
            <p>{{ age }}</p>
        </div>
    </template>

    <template id="word">
        <div>
            
        </div>
    </template>

</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'tom',
            age:29
        },
        // template:'<div><h2 style="color:green;">{{ name }}</h2><p>{{ age }}</p></div>'
        template:'#hello', // 引用模板
        /**
         * createElement(tagName,attribute,children)
         *    tagName 标签名，必须
         *    attribute 标签的属性，值为对象类型，可选
         *    children 标签的子节点，值为字符串或数组，如果是字符串表示文本节点，可选
         */ 
        render:function(createElement){
            return createElement('div',{
                attrs:{
                    id:'mydiv',
                    title:'this is a div'
                },
                style:{
                    color:'blue',
                    border:'1px solid #ccc'
                }
            },[
                createElement('h2',{
                    style:{
                        background:'pink'
                    }
                },this.name),
                createElement('p',this.age)
            ])
        }
    })

    console.log(vm.$el)


    function f1(){

    }

    function f2(fn){
        fn()
    }

    f2(f1)
</script>
</html>